<template>
  <view class="contain">
    <scroll-view
      class="scroll"
      :style="{ paddingBottom: contextButtomHeight + 'rpx' }"
      scroll-y="true"
      :scroll-top="scrollTop"
    >
      <view id="scroll" class="list-ul">
        <view
          v-for="(item, index) in talk.list"
          :id="`msg-${item.id}`"
          :key="index"
          :class="`${item.type === 1 ? 'wo' : 'ta'} list-li`"
        >
          <view class="item">
            <view class="avatar-box">
              <image :src="item.avatar" mode="scaleToFill" />
            </view>

            <view class="chat-content">
              <text class="txt">{{ item.context }}</text>
              <view class="sj"></view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view id="send-box" class="send-box">
      <view>
        <view class="voice-box">
          <view class="voice">
            <text :class="`iconfont icon-wifi`"></text>
          </view>
        </view>
        <view class="input-box">
          <textarea
            id="textarea"
            ref="inputRef"
            v-model="inputValue"
            class="textarea"
            type="text"
            :hold-keyboard="true"
            cursor-spacing="20"
            :auto-height="autoHeight"
          ></textarea>
        </view>
        <view class="right">
          <view v-if="inputValue === ''" class="more">
            <text :class="`iconfont icon-jiahao`"></text>
          </view>
          <view
            v-if="inputValue != ''"
            class="send-button"
            @touchend.prevent="sendHandle"
            >发送1</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  nextTick,
  getCurrentInstance,
} from 'vue'
import { useResize } from '@/hook'
import { WebSocketClass, Msg } from '@/config/webSocket'
import { baseService } from '@/api'

const currentInstance = getCurrentInstance()

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})

//const { } = toRefs(props);
const socket = new WebSocketClass(
  'wss://ruanjian211.top:3002/websocket/1',
  10000
)

const talk = reactive({
  list: [
    {
      id: 1, // 消息的ID
      context: `这是第1条消息`, //消息内容
      type: 1,
      // 根据type类型,确定其头像(真实接口其实就直接用返回的数据就行,这里为了模拟才做的)
      avatar:
        'https://pic1.zhimg.com/80/v2-658f5a09bba68f9643a919413c0558b0_1440w.webp',
    },
    {
      id: 1, // 消息的ID
      context: `除了这个设置换行的，我们还能想起 word-wrap 属性。这个属性是干222222222222222222222222嘛的呢？接下了就要分析这个属性的作用。你看到上面图片的问题了没，在任何地方都换行了，但是我第一行的单词和第二行的单词明明可以显示，我只希望把第三行的那个最长的单词换行就可以，不想破坏其他行的显示效果。`, //消息内容
      type: 2,
      // 根据type类型,确定其头像(真实接口其实就直接用返回的数据就行,这里为了模拟才做的)
      avatar:
        'https://pic1.zhimg.com/80/v2-7c6505eed9db133f0d85db3315335864_1440w.webp',
    },
    {
      id: 1, // 消息的ID
      context: `这是第1条消息`, //消息内容
      type: 1,
      // 根据type类型,确定其头像(真实接口其实就直接用返回的数据就行,这里为了模拟才做的)
      avatar:
        'https://pic1.zhimg.com/80/v2-658f5a09bba68f9643a919413c0558b0_1440w.webp',
    },
    {
      id: 1, // 消息的ID
      context: `除了这个设置换行的，我们还能想起 word-wrap 属性。这个属性是干222222222222222222222222嘛的呢？接下了就要分析这个属性的作用。你看到上面图片的问题了没，在任何地方都换行了，但是我第一行的单词和第二行的单词明明可以显示，我只希望把第三行的那个最长的单词换行就可以，不想破坏其他行的显示效果。`, //消息内容
      type: 2,
      // 根据type类型,确定其头像(真实接口其实就直接用返回的数据就行,这里为了模拟才做的)
      avatar:
        'https://pic1.zhimg.com/80/v2-7c6505eed9db133f0d85db3315335864_1440w.webp',
    },
    {
      id: 1, // 消息的ID
      context: `这是第1条消息`, //消息内容
      type: 1,
      // 根据type类型,确定其头像(真实接口其实就直接用返回的数据就行,这里为了模拟才做的)
      avatar:
        'https://pic1.zhimg.com/80/v2-658f5a09bba68f9643a919413c0558b0_1440w.webp',
    },
    {
      id: 1, // 消息的ID
      context: `除了这个设置换行的，我们还能想起 word-wrap 属性。这个属性是干222222222222222222222222嘛的呢？接下了就要分析这个属性的作用。你看到上面图片的问题了没，在任何地方都换行了，但是我第一行的单词和第二行的单词明明可以显示，我只希望把第三行的那个最长的单词换行就可以，不想破坏其他行的显示效果。`, //消息内容
      type: 2,
      // 根据type类型,确定其头像(真实接口其实就直接用返回的数据就行,这里为了模拟才做的)
      avatar:
        'https://pic1.zhimg.com/80/v2-7c6505eed9db133f0d85db3315335864_1440w.webp',
    },
  ] as Msg[],
})

const scrollTop = ref(100)
const inputValue = ref('')
const autoHeight = ref(true)
const inputRef = ref()

const contextButtomHeight = ref(170)

watch(
  () => inputValue.value,
  () => {
    useResize('#send-box', currentInstance, (res) => {
      contextButtomHeight.value = res.height * 2
      if (inputValue.value.length > 100) {
        autoHeight.value = false
      } else {
        autoHeight.value = true
      }
    })
  }
)

socket.onMessage((res: any) => {
  console.log(res)
  const obj = JSON.parse(res)
  obj.avatar =
    'https://pic1.zhimg.com/80/v2-7c6505eed9db133f0d85db3315335864_1440w.webp'
  talk.list.push(obj)
  useResize('#scroll', currentInstance, (res) => {
    scrollTop.value = res.height
    inputValue.value = ''
  })
})

const sendHandle = () => {
  console.log(socket.socketTask, 'webSocket.socketTask')

  const msg: Msg = {
    id: new Date().getTime(),
    sendUserId: 1,
    receiveUserId: 2,
    context: `${inputValue.value}`, //消息内容
    type: 1,
    // 根据type类型,确定其头像(真实接口其实就直接用返回的数据就行,这里为了模拟才做的)
    avatar:
      'https://pic1.zhimg.com/80/v2-658f5a09bba68f9643a919413c0558b0_1440w.webp',
  }
  baseService.sendOneMessage(msg).then((res) => {
    talk.list.push(msg)
    useResize('#scroll', currentInstance, (res) => {
      scrollTop.value = res.height
      inputValue.value = ''
    })
  })
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.scroll {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}

.list-ul > view:last-child {
  margin-bottom: 30rpx;
}

.list-ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;

  .list-li {
    width: 100%;
    margin-top: 20rpx;

    .avatar-box {
      width: auto;
      height: 100rpx;
      display: flex;
      align-items: center;
      > image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        border: #fff solid 1px;
      }
    }

    .chat-content {
      max-width: 500rpx;
      box-sizing: border-box;
      padding: 20rpx;
      margin: 0 20rpx;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-line;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      position: relative;
      color: #2e2e2e;
      font-size: 0.9rem;
    }
  }

  .wo {
    display: flex;
    justify-content: flex-end;

    .sj {
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid #07c160;
      border-right: 10px solid transparent;
      position: absolute;
      top: 30rpx;
      right: -35rpx;
    }

    .item {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;

      .chat-content {
        background-color: #07c160;
      }
    }
  }

  .ta {
    display: flex;
    justify-content: flex-start;

    .sj {
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid #fff;
      position: absolute;
      top: 30rpx;
      left: -35rpx;
    }
    .item {
      display: flex;

      .chat-content {
        background-color: #fff;
      }
    }
  }
}

.send-box {
  width: 100%;
  min-height: 160rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  padding: 0rpx 20rpx;
  padding-top: 20rpx;
  padding-bottom: 50rpx;

  > view {
    width: 700rpx;
    display: flex;
    align-items: center;
  }

  .voice-box {
    width: 100rpx;
    height: 75rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .voice {
      width: 70rpx;
      height: 70rpx;
      border: 1px solid;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      transform: rotate(90);
    }
  }

  .input-box {
    width: 500rpx;
    min-height: 75rpx;
    background-color: #f5f7fa;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    > .textarea {
      width: 90%;
      height: 75rpx;
    }
  }

  .right {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    .more {
      margin: 0 10rpx;
      > text {
        font-size: 2rem;
      }
    }

    .send-button {
      width: 120rpx;
      height: 75rpx;
      display: flex;
      align-items: center;
      background-color: #07c160;
      color: #fff;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;
    }
  }
}
</style>
